<template>
  <div>
    <Card class="search-condition m-b-sm">
      <Row>
        <span>赛事名称：</span>
        <Input v-model="pageModel.eventsName" placeholder="请输入" clearable style="width: 150px" />
        <span>承办单位：</span>
        <Select v-model="pageModel.undertakingUnit" placeholder="请选择" style="width:150px;" clearable>
          <Option v-for="(_item,index) in units" :key="index" :value="_item.teamId">{{_item.teamName}}</Option>
        </Select>
        <span>审核时间：</span>
        <DatePicker type="date" placeholder="请选择" style="width: 120px;margin-right:10px" v-model="pageModel.verifystartTime"></DatePicker>
        <DatePicker type="date" placeholder="请选择" style="width: 120px;margin-right:10px" v-model="pageModel.verifyendTime"></DatePicker>
        <Button @click="fetchListStart" class="m-l-sm" type="primary" icon="md-search">筛选</Button>
        <Button @click="reset" class="m-l-sm" icon="md-sync">重置</Button>
      </Row>
    </Card>
    <Card>
      <Row>
        <Table :loading="loading" stripe border :columns="tableColumns" :data="tableData"></Table>
        <page-temp :total="total" :current="page.pageNo" :size="page.pageSize" @changePage='changePage'></page-temp>
      </Row>
    </Card>
  </div>
</template>

<script>
import dict from "_c/dict/dict.vue";
import dictSpan from "_c/dict/dict-span.vue";
import Api from "@/api/game-verify";
import { getDict } from "@/api/configure";
const api = new Api();
// 赛事管理
export default {
  components: {
    dict,
    dictSpan
  },
  data() {
    return {
      loading: true,
      total: 0,
      pageModel: {},
      page: {
        pageSize: this.$config.PAGE_SIZE,
        pageNo: 1
      },
      units: [],
      tableColumns: [
        {
          title: "序号",
          width: 80,
          render: (h, params) => {
            return h(
              "span",
              this.page.pageSize * (this.page.pageNo - 1) + params.index + 1
            );
          }
        },
        {
          title: "赛事名称",
          key: "eventsName",
          ellipsis: true,
          render: (h, params) => {
            let title = params.row.eventsName;
            return h("span", { domProps: { title } }, title);
          }
        },
        {
          title: "申请类型",
          key: "operationType",
          width: 85,
          render: (h, params) => {
            return h(dictSpan, {
              props: {
                code: "ZGX_SSCZLX",
                value: params.row.operationType
              }
            });
          }
        },
        {
          title: "承办单位",
          key: "undertakingUnit",
          ellipsis: true,
          render: (h, params) => {
            let row = this.units.find(
              x => x.teamId === params.row.undertakingUnit
            );
            let title = row == null ? params.row.undertakingUnit : row.teamName;
            return h("span", { domProps: { title } }, title);
          }
        },
        {
          title: "赛事类型",
          key: "kindCode",
          width: 85,
          render: (h, params) => {
            return h(dictSpan, {
              props: { code: "ZGX_SSDJ", value: params.row.kindCode }
            });
          }
        },
        {
          title: "比赛类型",
          key: "eventsType",
          width: 85,
          render: (h, params) => {
            return h(dictSpan, {
              props: { code: "ZGX_BSLX", value: params.row.eventsType }
            });
          }
        },
        {
          title: "提交时间",
          key: "submissionTime",
          // ellipsis: true,
          render: (h, params) => {
            let self = this;
            let title = self.$config.getTime(params.row.submissionTime);
            return h("span", { domProps: { title } }, title);
          }
        },
        {
          title: "审核时间",
          key: "verifyTime",
          // ellipsis: true,
          render: (h, params) => {
            let self = this;
            let title = self.$config.getTime(params.row.verifyTime);
            return h("span", { domProps: { title } }, title);
          }
        },
        {
          title: "赛事计划",
          key: "planField",
          width: 85,
          render: (h, params) => {
            return h(
              "span",
              {
                style: {
                  color: "#FF9933"
                }
              },
              params.row.planField + "场"
            );
          }
        },
        {
          title: "审核员",
          key: "auditorBy",
          width: 85,
        },
        {
          title: "审核状态",
          key: "verifyStatus",
          width: 85,
          render: (h, params) => {
            return h(dictSpan, {
              props: { code: "ZGX_SHZT", value: params.row.verifyStatus },
              class: "verify-status-" + params.row.verifyStatus
            });
          }
        }
      ],
      tableData: []
    };
  },
  mounted() {
    let self = this;
    getDict({ code: "CBDW" })
      .then(data => {
        self.units = data;
        self.fetchListStart();
      })
      .catch(error => {
        self.fetchListStart();
      });
  },
  methods: {
    // 获取字典数据
    getVal(expression) {
      let self = this;
      eval(expression);
    },
    // 获取数据
    fetchListStart() {
      let self = this;
      self.page = { ...self.page, ...self.pageModel, pageNo: 1 };
      self.fetchList();
    },
    fetchList() {
      this.loading = true;
      api
        .historyListPage(this.page)
        .then(data => {
          this.loading = false;
          this.tableData = data.list || [];
          this.total = data.count || 0;
        })
        .catch(error => {
          this.loading = false;
        });
    },
    // 分页
    changePage(pageNum) {
      this.page.pageNo = pageNum;
      this.fetchList();
    },
    reset() {
      let self = this;
      Object.keys(self.pageModel).forEach(x => {
        self.pageModel[x] = null;
      });
      this.fetchListStart();
    }
  }
};
</script>

<style scoped>
</style>
